<template>
    <div>
        <ul class="shop-list">
            <router-link v-for="item in shopInfoList" :key="item.id" tag="li" :to="'/shopInfo/'+item.id">
                <img :src="item.img_url" alt="">
                <h5>{{ item.title }}</h5>
                <div class="shop-info">
                    <p>
                        <span>￥{{ item.sell_price }}</span>
                        <span>￥{{ item.market_price }}</span>
                    </p>
                    <p>
                        <span>热卖中</span>
                        <span>剩{{ item.stock_quantity }}件</span>
                    </p>
                </div>
            </router-link>
        </ul>

        <!--加载更多-->
        <mt-button type='danger' size='large' @click="loadMore">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                pageindex: 1,//初始化第一页数据
                shopInfoList: [],
            }
        },
        created() {
            this.getShopList(1);
        },
        methods: {
            //获取商品列表
            getShopList:function(_pageindex){
                this.$http.get('api/getgoods?pageindex='+ _pageindex).then(result =>{
                    if(result.body.status === 0){
                        this.shopInfoList = this.shopInfoList.concat(result.body.message);
                    }else{
                        Toast({
                            message: '获取商品列表失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                })
            },
            loadMore:function(){
                this.pageindex += 1;
                this.getShopList(this.pageindex);
            }
        },
    }
</script>

<style lang="less" scoped>
    .shop-list{
        display: flex;
        flex-wrap: wrap;//换行
        justify-content: space-between;
        padding: 0 1% 20px;
        li{
            width: 49%;
            text-align: center;
            box-shadow: 0 0 8px #ccc;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 312px;
            img{
                width: 100%
            }
            h5{
                font-size: 15px;
                color: #000;
                font-weight: bold;
                text-align: left;
                margin: 8px 0;
            }
            .shop-info{
                padding: 0 8px;
                background-color: #ccc;
                p{
                    margin-bottom: 0;
                    padding: 10px 0;
                    &:first-of-type{
                        text-align: left;
                        padding-bottom: 0;
                        span{
                            &:first-of-type{
                                color: red;
                                font-size: 15px;
                            }
                            &:last-of-type{
                                font-size: 13px;
                                text-decoration: line-through; //划掉
                                margin-left: 10px;
                            }
                        }
                    }
                    &:last-of-type{
                        font-size: 14px;
                        display: flex;
                        justify-content: space-between;
                        padding-top: 5px;
                    }
                }
            }
        }
    }
</style>
